<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<head>
    <title>服务升级</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">

        .update-btn {
            width: 180px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            text-align: center;
            margin: 20px auto 20px;
            color: #fff!important;
            cursor: pointer;
        }

        .update-btn {
            /*background-color: #ff9023;*/
            /*box-shadow: 0 0 8px #ff9023;*/
        }

        .styles-body .blue {
            background: #1c70ea;
            box-shadow: 0 0 8px #1c70ea;
            color: #1c70ea;
        }

        .styles-body .darkblue {
            background: #4e55ff;
            box-shadow: 0 0 8px #4e55ff;
            color: #4e55ff;
        }

        .styles-body .green {
            background: #15dcb5;
            box-shadow: 0 0 8px #15dcb5;
            color: #15dcb5;
        }

        .styles-body .orange {
            background: #FF9900;
            box-shadow: 0 0 8px #FF9900;
            color: #FF9900;
        }

        .styles-body .purple {
            background: #996699;
            box-shadow: 0 0 8px #996699;
            color: #996699;
        }

        .styles-body .pink {
            background: #FF9999;
            box-shadow: 0 0 8px #FF9999;
            color: #FF9999;
        }

        .styles-body .red {
            background: #f94a4a;
            box-shadow: 0 0 8px #f94a4a;
            color: #f94a4a;
        }

        .styles-body .gray {
            background: #999999;
            box-shadow: 0 0 8px #999999;
            color: #999999;
        }

        .styles-body .brown {
            background: #999966;
            box-shadow: 0 0 8px #999966;
            color: #999966;
        }

        .ul-main {
            width: 1000px; margin: 0px auto
        }

        .ul-main .li-item {
            display: flex; padding: 15px 10px; margin-bottom: 15px; border: 1px solid #dbdee5; border-radius: 5px;
        }

        .ul-main .li-item > div:first-child .pic {
            width: 150px; height: 100px; background-size: cover;
        }

        .ul-main .li-item > div.item-center .title {
            line-height: 26px; font-size: 16px
        }

        .ul-main .li-item > div.item-center .remarks {
            color: #848484;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .buyed-icon{
            font-size: 30px;
            color: #e8473f;
            display: block;
            text-align: center;
        }
    </style>
</head><body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp"%>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="introduce mt20">
                <c:if test="${fn:length(packages) == 0}">
                    <div class="f16">敬请期待新的增值服务...</div>
                </c:if>
                <c:if test="${fn:length(packages) > 0}">
                    <ul class="ul-main">
                        <c:forEach var="module" items="${packages}">
                            <c:set var="flag" value="false"></c:set>
                            <c:forEach var="pMember" items="${packageMembers}">
                                <c:if test="${pMember.levelId == module.id}">
                                    <c:set var="flag" value="true"></c:set>
                                </c:if>
                            </c:forEach>
                            <li class="li-item" data-id="${module.id}">
                                <div style="flex: 0.5">
                                    <div class="pic" style="background-image: url('${module.picture}'); "></div>
                                </div>
                                <div class = "item-center" style="flex: 3;margin-left: 15px;margin-right: 15px;">
                                    <p class="title"><span>${module.name}</span></p>
                                    <p class="remarks"><span>${module.remarks}</span></p>
                                </div>
                                <div style="flex: 0.4; text-align: center!important;">
                                    <div style="font-size: 16px; color: red; padding-bottom: 10px;">${module.price}<span>元/${module.unit}</span></div>
                                    <c:if test="${flag == false}">
                                        <c:if test="${module.price > 0.0}">
                                            <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-sm buy-btn"> <i class="iconfont icon-add btn-icon"></i> 购买</a>
                                        </c:if>
                                        <c:if test="${module.price == 0.0}">
                                            <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-sm free-buy-btn"> <i class="iconfont icon-add btn-icon"></i> 购买</a>
                                        </c:if>
                                    </c:if>
                                    <c:if test="${flag == true}">
                                        <div><i class="iconfont icon-roundcheck btn-icon buyed-icon"></i></div>
                                    </c:if>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </c:if>
            </div>
        </div>
    </section>
</div>
<!--底部-->
<%@include file="../include/footer.jsp" %>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '服务升级',
            curr: true
        }]
    });

    $(function () {
        var layer;
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
        $(".introduce .ul-main").delegate(".li-item", 'click', function (e) {
            var $target = $(e.target);
            var levelId = $target.closest("li").data("id");
            if($target.hasClass("btn-icon")) {
                $target = $target.parent();
            }
            if($target.hasClass("buy-btn")) {
                layer.open({
                    type: 2,
                    area: ["670px", "470px"],
                    title: "订单支付",
                    maxmin: false,
                    content: "${ctx}/charge/package/" + levelId + "/buyOrder.do",
                    btn: ['关闭'],
                    yes: function (index) {
                        top.layer.close(index);
                    }
                });
                e.stopPropagation();
            } else if ($target.hasClass("free-buy-btn")) {
                // 免费
                $.post("${ctx}/charge/package/buyFreeModule.do", {"moduleId" : levelId}, function (data) {
                    if (data.success) {
                        util.layerMsgSuccess("购买成功", function () {
                            location.reload();
                        })
                    } else {
                        util.layerMsgError("购买失败")
                    }
                })
            }
        });
    })
</script>
</body>
</html>
